<!-- 水位图和进度池配置 -->
<template>
  <div style="margin-top:16px">
    <el-form-item label="透明度" class="form_item_margin">
      <el-slider
        v-model="myConfig.opacity"
        :show-tooltip="false"
        class="slider136 r_margin_right8"
      >
      </el-slider>
      <el-input
        v-model.number="myConfig.opacity"
        class="r_56width"
        oninput="value=value.replace(/[^\d]/g,'')"
      >
        <span slot="suffix" style="line-height: 32px">%</span>
      </el-input>
    </el-form-item>
    <hr class="hr_color" style="margin-bottom: 2px" />
    <el-collapse accordion>
      <el-collapse-item
        title="进度池配置"
        v-if="myConfig.is === 'dv-percent-pond'"
      >
        <el-form-item label="配色">
          <l-input-color v-model="myConfig.colors[0]"></l-input-color>
          <l-input-color v-model="myConfig.colors[1]"></l-input-color>
        </el-form-item>
        <el-form-item label="边框宽度">
          <el-input-number
            v-model="myConfig.borderWidth"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="边框间隙">
          <el-input-number
            v-model="myConfig.borderGap"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="线条间隙">
          <el-input-number
            v-model="myConfig.lineDash[0]"
            controls-position="right"
            style="width: 50%"
          >
          </el-input-number>
          <el-input-number
            v-model="myConfig.lineDash[1]"
            controls-position="right"
            style="width: 50%"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="文字颜色">
          <l-input-color v-model="myConfig.textColor"></l-input-color>
        </el-form-item>
        <el-form-item label="边框半径">
          <el-input-number
            v-model="myConfig.borderRadius"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="局部渐变">
          <el-switch v-model="myConfig.localGradient"></el-switch>
        </el-form-item>
        <el-form-item label="信息格式化">
          <el-input v-model="myConfig.formatter"></el-input>
        </el-form-item>
      </el-collapse-item>

      <el-collapse-item title="水位图配置" v-else>
        <el-form-item label="形状">
          <el-select
            v-model="myConfig.shape"
            filterable
            allow-create
            default-first-option
            placeholder="key值"
          >
            <el-option
              v-for="item in shapeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配色">
          <l-input-color v-model="myConfig.colors[0]"></l-input-color>
          <l-input-color v-model="myConfig.colors[1]"></l-input-color>
        </el-form-item>
        <el-form-item label="波浪数量">
          <el-input-number v-model="myConfig.waveNum" controls-position="right">
          </el-input-number>
        </el-form-item>
        <el-form-item label="波浪高度">
          <el-input-number
            v-model="myConfig.waveHeight"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="透明度" class="form_item_margin">
      <el-slider
        v-model="myConfig.waveOpacity"
        :show-tooltip="false"
        class="slider136 r_margin_right8"
      >
      </el-slider>
      <el-input
        v-model.number="myConfig.waveOpacity"
        class="r_56width"
        oninput="value=value.replace(/[^\d]/g,'')"
      >
        <span slot="suffix" style="line-height: 32px">%</span>
      </el-input>
    </el-form-item>
        <el-form-item label="格式化">
          <el-input v-model="myConfig.formatter"></el-input>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
    <hr class="hr_color" style="margin-bottom: 2px" />
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      shapeOptions: [
        { label: "矩形", value: "rect" },
        { label: "圆形", value: "round" },
        { label: "圆角矩形", value: "roundRect" },
      ],
    };
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
};
</script>

<style>
</style>